<template>
  <!-- 灾情报送首页 -->
  <div class="DisasterReporting">

    <el-row :gutter="24">

      <el-col :span="9" >
        <div style=" border: 1px solid #22588F;padding:0 10px;">



          <!-- 营销 -->
          <div class="recovery_rate">
            <div class="ss_select">
              <div class="color1">实时恢复率</div>
              <div>
                <el-select v-model="value" placeholder="请选择11">
                  <el-option
                    v-for="item in tabListQs"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </div>

          </div>
          <div class="recovery_rate_round">
            <div id="main" style="width:100%;height:100%"></div>
          </div>
          <div class="recovery_rate_round">
            <div id="mainPic" style="width:100%;height:100%"></div>
          </div>
        </div>
        <div style="margin-top: 10px; border: 1px solid #22588F;padding:0 10px;">
          <!-- 配电 -->
          <div class="tab_content" >
            <div class="tab_bg color1">
              <div>10kV</div>
            </div>
            <div class="table color1">
              <div>
                <div>跳闸</div>
                <div class="top color2">0</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>恢复</div>
                <div class="top color3">0</div>
              </div>
            </div>
          </div>
          <!-- 营销 -->
          <div class="tab_content">
            <div class="tab_bg color1">
              <div>台区</div>
              <div>用户</div>
              <div>重要用户</div>
            </div>
            <div class="table color1">
              <div>
                <div>停电</div>
                <div class="top color2">1096</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>恢复</div>
                <div class="top color3">338</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>恢复率</div>
                <div class="top color3">31%</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>停电</div>
                <div class="top color2">68610</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>恢复</div>
                <div class="top color3">20950</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>恢复率</div>
                <div class="top color3">30%</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>停电</div>
                <div class="top color2">4</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>恢复</div>
                <div class="top color3">2</div>
              </div>
              <div class="table_line"></div>
              <div>
                <div>恢复率</div>
                <div class="top color3">50%</div>
              </div>
              <div class="table_line"></div>
            </div>
          </div>
          <div class="content_bottom color1">
            <div>报送部门：设备部</div>
            <div>报送时间：2021-08-12 09:50:21</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import * as echarts from "echarts";

export default {
  name: "TheOverviewOfMarketing",
  components: {

  },
  data() {
    return {

      optionsDataList: [{
        value: "选项1",
        label: "黄金糕"
      }, {
        value: "选项2",
        label: "双皮奶"
      }, {
        value: "选项3",
        label: "蚵仔煎"
      }, {
        value: "选项4",
        label: "龙须面"
      }, {
        value: "选项5",
        label: "北京烤鸭"
      }],
      optionsTabDataList: [
        {
          value: "1",
          label: "国网"
        },
        {
          value: "2",
          label: "省公司"
        }
      ],
      tabListQs: [
        {
          value: "1",
          label: "全省"
        },
        {
          value: "2",
          label: "全市"
        }
      ],
      value: "",
      tableData: [{
        name: "35kV古柳线",
        dydj: "35kV",
        ssdw: "国网随州供电公司",
        tytzyy: "过流I断动作跳闸",
        tdsj: "2021-08-12 08:56:09"
      }, {
        name: "35kV土南线",
        dydj: "35kV",
        ssdw: "国网随州供电公司",
        tytzyy: "",
        tdsj: "2021-08-12 08:56:09"
      }, {
        name: "35kV土三线",
        dydj: "35kV",
        ssdw: "国网随州供电公司",
        tytzyy: "过流I断动作跳闸",
        tdsj: "2021-08-12 08:56:09"
      }, {
        name: "35kV三花线",
        dydj: "35kV",
        ssdw: "国网随州供电公司",
        tytzyy: "",
        tdsj: "2021-08-12 08:56:09"
      }],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px"
    };
  },
  mounted() {
    // this.loadDataOne()
    // this.loadDataTwo()
    // this.loadDataThree()

  },
  methods: {
    dialogVisible(i) {
      this.btnNum = i.id;
      // this.dialogTableVisible = true;
      console.log(this.btnNum);
      // this.dialogFormVisible = true
    },
    loadDataOne() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item"
        },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    loadDataTwo() {
      var chartDom = document.getElementById("main11111");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        legend: {
          data: ["累计跳闸", "累计恢复"],
          textStyle: {
            fontSize: 14, // 字体大小
            color: "#ffffff"// 字体颜色
          }
        },
        xAxis: [
          {
            type: "category",
            data: ["500kV及以上", "220kV", "110kV", "35kV"],
            axisPointer: {
              type: "shadow"
            },
            axisLabel: {
              interval: 0, // 设置间隔为0
              // rotate:45, //代表逆时针旋转45度
              textStyle: {
                show: true,
                fontFamily: "微软雅黑",
                color: "#fff",
                fontSize: "12"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：条",
            nameTextStyle: {
              color: "#fff",
              fontSize: 14
            },
            min: 0,
            max: 10,
            axisLabel: {
              textStyle: {
                show: true,
                fontFamily: "微软雅黑",
                color: "#fff",
                fontSize: "14"
              }
            }
            // interval: 50,
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          }

        ],
        series: [
          {
            name: "累计恢复",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + "kV";
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#4982DD" },
                { offset: 0.5, color: "#275397" },
                { offset: 1, color: "#153A71" }
              ])
            },
            data: [
              2.0, 4.9, 7.0, 23.2
            ]
          },
          {
            name: "累计跳闸",
            type: "bar",
            tooltip: {
              valueFormatter: function (value) {
                return value + " kV";
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#E28459" },
                { offset: 0.5, color: "#A57669" },
                { offset: 1, color: "#6E6A78" }
              ])
            },
            data: [
              2.6, 5.9, 9.0, 26.4
            ]
          }

        ]
      };
      option && myChart.setOption(option);
    },
    loadDataThree() {
      var chartDom = document.getElementById("mainPic");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item"
        },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    handleClick() {
      console.log("未下发");
    }


  }
};

</script>
<style scoped lang="less">
  @import "../../../../assets/style/DisasterInformation.less";
.DisasterReporting {
  width: 100%;
  // height: 100%;
}
.transmission_line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tab_btn {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recovery_rate {
  display: flex;
  margin-top: 20px;
  .recovery_rate_round {
    width: 35%;
    height: 300px;
    // margin-left: 30px;
    // background: red;
  }
  .recovery_rate_bar {
    margin-left: 20px;
    width: 65%;
    height: 270px;
    // background: red;
    > div {
      font-size: 12px;
    }
  }
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.tab_content{
  // height: 100px;
  width: 100%;

  // background: red;
  .tab_bg{
    display: flex;
    justify-content: space-between;
    align-content: center;
    background: #193F8E;
    height: 35px;
    align-items: center;
    padding: 0 20px;
    border-radius: 3px;
  }
  .table_line{
    height: 50px;
    width: 2px;
    background: #193F8E;
  }
  .table{
    margin-top: 10px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    text-align: center;
  }
  .top{
    margin-top: 15px;
  }
}
.content_bottom{
  margin: 10px 0;
  font-size: 12px;
  color:#fff;
  display: flex;
  justify-content: space-between;
  text-align: center;
}
:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}
:deep(.el-input__inner) {
  background: #197BB4;
  color: #fff;
}
.ss_select{
  width: 100%;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center;
}

</style>
